<script>
import { defineComponent, reactive, ref } from 'vue'
import UnPub from '@Page/unPub'
import * as Antd from 'ant-design-vue'
import { useStore } from 'vuex'
import { message } from 'ant-design-vue'
import { confirm } from '@Config/config'
export default defineComponent({
  setup() {
    let store = useStore()

    let clickHandler = () => {
      form_ref.value.validate().then(() => {
        if (form_state.password != '123456') {
          confirm({
            title: <span class="red">提示</span>,
            content: (
              <span class="red">
                <h3>密码不正确！</h3>
              </span>
            ),
          })
          return
        }
        store.commit('password', form_state.password)
      })
    }
    let form_state = reactive({
      password: null,
    })

    let form_ref = ref()
    return { store, clickHandler, form_state, form_ref }
  },
  render() {
    return (
      <Antd.Row gutter={[20, 20]}>
        {this.store.state.password == null && (
          <Antd.Col span={24}>
            <Antd.Form model={this.form_state} ref="form_ref">
              <Antd.FormItem
                name="password"
                rules={[
                  { required: true, message: '请输入密码' },
                  
                ]}
              >
                <Antd.InputPassword
                  placeholder="请输入密码"
                  value={this.form_state.password}
                  onChange={(e) => {
                    this.form_state.password = e.target.value
                  }}
                />
              </Antd.FormItem>
            </Antd.Form>
          </Antd.Col>
        )}
        {this.store.state.password == null && (
          <Antd.Col span={24}>
            <Antd.Space>
              <Antd.Button type="primary" onClick={this.clickHandler}>
                确定
              </Antd.Button>
            </Antd.Space>
          </Antd.Col>
        )}
        {this.store.state.password?.length > 0 && (
          <Antd.Col span={24}>
            <UnPub />
          </Antd.Col>
        )}
      </Antd.Row>
    )
  },
})
</script>
